import React from 'react';
import { Select as AntSelect } from 'antd';
import type { SelectProps as AntSelectProps } from 'antd/es/select';

export interface SelectOption {
  label: string;
  value: string | number;
  disabled?: boolean;
}

export interface SelectProps extends Omit<AntSelectProps, 'options'> {
  componentId?: string;
  label?: string;
  options?: SelectOption[];
  placeholder?: string;
}

const { Option } = AntSelect;

const Select: React.FC<SelectProps> = ({
  componentId,
  label,
  options = [],
  placeholder = '请选择',
  ...props
}) => {
  return (
    <div className="yong-select-wrapper">
      {label && <div className="yong-select-label">{label}</div>}
      <AntSelect
        placeholder={placeholder}
        style={{ width: '100%' }}
        {...props}
        data-component-id={componentId}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.value} disabled={option.disabled}>
            {option.label}
          </Option>
        ))}
      </AntSelect>
    </div>
  );
};

export default Select; 